<template>
	<view>
		<view class="search"><u-search @custom="getMovieList()" v-model="name" placeholder="请搜索电影名称" shape="square" animation="false" ></u-search></view>
		<view class="movie-list" v-for="(item1,index1) in movie_list" :key="index1">
			<view class="movie_video"><image :src="item1.video"></image></view>
			<view class="center">
				<view class="actor_name"><text>{{item1.movie_name}}</text></view>
				<view class="comment_count" v-if="item1.comment_count!=null">淘票票评分<text>{{item1.comment_count}}</text></view>
				<view class="comment_count" v-if="item1.comment_count==null">暂无评分</view>
				<view class="director"><text>导演：{{item1.director}}</text></view>
				<view class="actor"><text></text>主演：{{item1.actor}}</view>
				<view class="think">
					<view class="status" v-if="item1.status==1">今日最热</view>
					<view class="hot" v-if="item1.hot==1">一周最热</view>
					<view class="best" v-if="item1.best==1">口碑最佳</view>
				</view>
			</view>
			<view class="buy">
				<button class="buy-button" @click="buy_ticket(item1.id)"><text>购票</text></button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				movie_list:[],
			}
		},
		onShow() {
			if(uni.getStorageSync('name')){
				this.name=uni.getStorageSync('name')
			}
		},
		methods: {
			getMovieList(){
				// var that=this
				// this.name = uni.getStorageSync("name"),
				uni.request({
					url:'http://www.moive.com/api/movie_mysql/search_movie.php',
					 method: 'GET',
					 data:{
					 	name:this.name
					 },
					          success: (res)=>{
								  console.log("111")
						
						 this.movie_list=res.data;
						 console.log(this.movie_list)
							  },
					          fail: (err)=>{}
				})
			},
			buy_ticket(id){
				if(uni.getStorageSync('phone')){
					uni.navigateTo({
					    	url:"../homepange/buyTicket?id="+id
					    })
					console.log(id)
				}else{
					uni.showToast({
						title:"请登陆后购票",
						icon:'none',
						duration:2000,
						mask:true
					})
					setTimeout(function(){
						uni.navigateTo({
							url:'../me/login'
						})
					},2000)
				}
			},
		},
	
	}
</script>

<style lang="scss" scoped>
.search{
	width:96%;
	margin:0 auto;
	margin-top: 5px;
}
.list{
	width:94%;
	height:60px;
	border-radius: 5px;
	background-color: rgb(243, 244, 245);
	margin:0 auto;
}
.bor{
	width:25%;
	height:60px;
	float:left;
	display:block;
	text-align: center;
}
.bor-view{
	width:100%;
	height:40px;
	display:flex;
	justify-content: center;
}
.bor-img{
	width:40px;
	height:40px;
	margin-top: 5px;
}
.bor-text{
	font-size: 10px;
	
}
.movie-list{
	width:92%;
	height:100px;
	background-color: rgb(243, 244, 245);
	margin:0 auto;
	border-top: 10px #ffffff solid;
	border-radius: 10px;
}
.movie_video{
	width:20%;
	height:85%;
	margin-top:7.5px;
	margin-left:10px;
	float:left;
	display: block;
}
.movie_video image{
	width:100%;
	height:100%;
	border-radius: 10px;
}
.center{
	width:55%;
	height:100%;
	float:left;
	display: block;
}
.next_center{
	width:55%;
	height:100%;
	float:left;
	display: block;
}

.wantch_people{
	margin-left:6px;
	font-size:10px;
	float:left;
	display: block;
	color: rgb(121, 121, 121);
}
.wantch_people text{
	color:rgb(252,172,20);
	font-size: 12px;
}
.time{
	font-size:10px;
	float:left;
	display: block;
	color: rgb(121, 121, 121);
	margin-left:5px;
}
.actor_name{
	width:100%;
	margin-top:6px;
	margin-left:10px;
}
.actor_name_next{
	// width:100%;
	margin-top:6px;
	margin-left:10px;
    float:left;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.all_name{
width:100%;
height:30px;
}
.people_center{
	width:100%;
	height:15px;
}
.point{
	margin-left:5px;
	width:30px;
	background-color: rgb(252,172,20);
	color:white;
	text-align: center;
	border-radius: 5px;
	font-size: 11px;
	float:left;
	display: block;
	margin-top:8px;
}

.comment_count{
	width:100%;
	font-size:10px;
	color: rgb(121, 121, 121);
	margin-left:10px;
	margin-top:2px;
}
.comment_count text{
	margin-left:3px;
	color:rgb(223, 154, 107)
}
.director{
	width:100%;
	font-size:10px;
	color: rgb(121, 121, 121);
	margin-left:10px;
	margin-top:2px;
}
.actor{
	width:100%;
	font-size:10px;
	color: rgb(121, 121, 121);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-left:10px;
	margin-top:0px;
}
.think{
	width:100%;
    margin-left:10px;
}
.status{
	border:1px rgb(255,67,97) solid;
	font-size: 8px;
	color:rgb(255,67,97);
	border-radius: 3px;
	width:50px;
	float:left;
	display: block;
}
.hot{
	border:1px rgb(255,144,28) solid;
	font-size: 8px;
	color:rgb(255,144,28);
	border-radius: 3px;
	width:50px;
	float:left;
	display: block;
	margin-left:2px;
}
.best{
	border:1px rgb(49,169,245) solid;
	font-size:8px;
	color:rgb(49,169,245);
	border-radius: 3px;
	float:left;
	display: block;
	width:50px;
	margin-left:2px;
}
.buy{
	margin-top: 3%;
	width:20%;
	height:80%;
	float:right;
	display: flex;
	justify-content: center;
	align-items: center;
}
.buy-button{
	width:80%;
	height:28px;
	font-size: 8px;
	text-align: center;
	color:white;
	background-color: rgb(251,86,130);
	border-radius: 14px;
}
.before{
	width:80%;
	height:28px;
	font-size: 8px;
	text-align: center;
	color:white;
	background:linear-gradient(to right,rgb(40,198,251),rgb(53,179,249));
	border-radius: 14px;
}
.want_look{
	width:80%;
	height:28px;
	font-size: 8px;
	text-align: center;
	color:white;
	background:linear-gradient(to right,rgb(252,172,20),rgb(254,176,82));
	border-radius: 14px;
}
</style>